<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档下载模板</title>
    <style>
        .api-home {
            width: 99vw;
            position: relative;
        }

        .api-info {
            position: relative;
            z-index: 1;
            width: 50em;
            margin: auto;
        }

        .doc-menu {
            min-width: 300px;
            background-color: #EBEBEB;
            background-clip: content-box;
            z-index: 4;
            overflow: hidden;
            position: absolute;
            border-radius: 2px;
            width: 500px;
            padding-right: 14px;
            max-height: 98vh;
            resize: horizontal;
            overflow-y: auto; /* 当内容超出时显示垂直滚动条 */
        }

        .api-menu {
            background-color: #EFEFEF;
            border-radius: 4px;
            width: 15vw;
            min-width: 300px;
            overflow: hidden;
            position: absolute;
            top: 8px;
            right: 10px;
            z-index: 4;
            margin-right: 12px;
            max-height: 98vh;
            overflow-y: auto; /* 当内容超出时显示垂直滚动条 */
        }

        .api-menu-title {
            margin: 14px 0;
            color: #ba3925;
        }

        .el-tree-node.is-current > .el-tree-node__content {
            background-color: white !important;
            color: #333 !important;
        }

        .common-txt {
            color: #606266;
            border: 0 solid transparent;
            background-color: transparent;
            padding: 4px 6px 0 4px;
            width: 30px;
            height: 30px;
        }

        /* 按钮点击时（激活状态）的样式 */
        .common-txt:active {
            background-color: #d9ecff; /* 点击时变为深绿色 */
            color: #c6e2ff;
        }

        /* 针对所有无序列表取消项目符号 */
        ul {
            list-style-type: none;
        }

        /* 或者针对特定类别的无序列表取消项目符号 */
        ul.custom-list {
            list-style-type: none;
        }

        /* 对于有序列表也是如此 */
        ol {
            list-style-type: none;
        }

        /* 或者针对特定类别的有序列表 */
        ol.special-list {
            list-style-type: none;
        }

        .sectlevel1 {
            padding-left: 10px;
        }

        .test-clz {
            background-color: #00bf00;
            height: 20vh;
            padding: 10px;
        }

        .doc-txt {
            max-height: 90vh;
            overflow-y: auto; /* 当内容超出时显示垂直滚动条 */
        }

        /* 使用WebKit-based浏览器（如Chrome、Safari）的伪元素选择器来美化滚动条 */
        *::-webkit-scrollbar {
            width: 10px; /* 滚动条宽度 */
            height: 10px; /* 滚动条按钮和轨道的高度 */
        }

        /* 滚动条轨道 */
        *::-webkit-scrollbar-track {
            background-color: #f1f1f1; /* 轨道背景颜色 */
            border-radius: 5px; /* 圆角 */
            margin-left: -4px;
        }

        /* 滚动条滑块（thumb） */
        *::-webkit-scrollbar-thumb {
            background-color: #888; /* 滑块背景颜色 */
            border-radius: 5px; /* 圆角 */
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); /* 增加阴影效果 */
        }

        /* 当滑块hover时的样式 */
        *::-webkit-scrollbar-thumb:hover {
            background-color: #555; /* 鼠标悬停时滑块的颜色 */
        }

        /* 重置原生样式 */
        #example-select {
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            background-image: none;
            cursor: pointer;
            outline: none;
            margin-left: 6px;
        }

        /* 基本样式 */
        #example-select {
            height: 30px;
            font-size: 16px;
            line-height: 20px;
            padding: 0 20px 0 40px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            background-color: white;
            background-position: left center;
            background-repeat: no-repeat;
            background-size: 16px;
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 .png 24'%3E%3Cpath d='M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6L6,10L7.41,8.59z' fill='%23666'/%3E%3C/svg%3E");
        }

        /* 状态样式 */
        #example-select:hover,
        #example-select:focus {
            border-color: #999;
        }

        /* 选择项样式 */
        #example-select option {
            font-size: inherit;
            line-height: inherit;
            color: #333;
            background-color: white;
        }

        /* 选中项样式 */
        #example-select option:checked {
            background-color: #f0f0f0;
            color: #000;
        }

        .lake-table {
            width: 750px;
            border-collapse: collapse;
            border: 1px solid #000;
        }

        td {
            border: 1px solid #555;
            padding: 4px;
        }

        .tb-title {
            background-color: #eee;
            size: 18px;
            font-weight: bold;
            color: #555;
        }

        td p {
            margin: 6px;
        }

        .div-container {
            position: relative;
            border-radius: 6px;
        }

        .copy-div {
            position: absolute;
            top: 6px;
            right: 10px;
            z-index: 2;
        }

        .code-div {
            z-index: 1;
            background-color: gray;
            border-radius: 8px;
        }

        code {
            overflow-x: auto !important;
            font-size: 14px;
            font-family: "Courier New", Courier, monospace;
            display: block;
            white-space: pre;
            margin: 0;
            font-weight: bold;
        }

        pre {
            background-color: #f3f3f3;
            padding: 10px;
            line-height: 1.2;
            margin: 0;
            border-radius: 6px;
        }

        #message-container {
            position: fixed;
            z-index: 1000;
            top: 16px;
            margin: 0 auto;
            width: 25%;
            box-sizing: border-box;
            justify-content: center;
            display: flex;
            flex-direction: column;
        }

        .message {
            position: relative;
            min-width: 300px;
            max-width: calc(100% - 32px);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            padding: 16px 20px;
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.3s ease-in-out;
            background-color: #f0f9eb;
            color: #67c23a;
            margin: 16px auto;
        }

        .message.center {
            left: 50%;
            transform: translateX(-50%);
        }

        .message.show {
            opacity: 1;
            transform: translateX(0);
        }

        .message .close-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            cursor: pointer;
            font-size: 14px;
            color: #909399;
        }

        .message .close-btn:hover {
            color: #409EFF;
        }

        .clicked {
            background-color: #f0f0f0; /* 鼠标悬停时的背景色 */
            color: #007bff; /* 鼠标悬停时的文字颜色 */
        }


    </style>
    <script>
        const bookId = "book-id";
        const docId = "doc-id";
        window.onload = function () {
            const catalog = document.getElementById(bookId);
            const catalog1 = document.getElementById(docId);
            book(catalog)
            book(catalog1)
        }

        function book(catalog) {
            const childs = catalog.getElementsByTagName("ul");
            for (let i = 0; i < childs.length; i++) {
                const liList = childs[i].childNodes;
                for (let j = 0; j < liList.length; j++) {
                    if (liList[j].tagName === "LI") {
                        addEvent(liList[j]);
                    }
                }
            }
        }

        function addEvent(o) {
            let as = o.firstChild;
            if (o.children.length === 0) {
                return
            }
            let imgEl = getEleI("block");
            o.insertBefore(imgEl, as)
            imgEl.onclick = function (e) {
                const theEvent = window.event || e;
                const link = theEvent.srcElement ? theEvent.srcElement : theEvent.target;
                const parentNode = link.parentNode;
                const uls = parentNode.childNodes;
                let disStr = " "
                for (let i = 0; i < uls.length; i++) {
                    const childEl = uls[i]
                    if (childEl.tagName === "UL") {
                        if (childEl.style.display === "none") {
                            childEl.style.display = "block";
                            disStr = "block";
                        } else {
                            childEl.style.display = "none";
                            disStr = "none";
                        }
                    }
                }
                const imgEl = parentNode.firstChild;
                if (disStr === "block") {
                    imgEl.src = down
                } else if (disStr === 'none') {
                    imgEl.src = up
                }
            }
        }

        function getEleI(str) {
            let resultI = document.createElement("img")
            resultI.style.cssText = '--color: inherit;height: 1rem;width: 1rem;line-height: 1rem;display: inline-flex;justify-content: center;align-items: center;position: relative;fill: currentColor;color: var(--color);font-size: inherit;';
            resultI.className = "menu-operator-i"
            // resultI.innerText = "收"
            if (str === 'block') {
                resultI.src = down
            } else {
                resultI.src = up
            }
            return resultI
        }

        let open_svg_path = 'M74.382 40.5H24.618a8.333 8.333 0 0 0-5.892 14.226l24.881 24.881a8.333 8.333 0 0 0 11.786 0l24.881-24.881A8.333 8.333 0 0 0 74.382 40.5Zm0 134H24.618a8.333 8.333 0 0 0-5.892 14.226l24.881 24.881a8.333 8.333 0 0 0 11.786 0l24.881-24.881a8.333 8.333 0 0 0-5.892-14.226ZM125 41h105c5.523 0 10 4.477 10 10s-4.477 10-10 10H125c-5.523 0-10-4.477-10-10s4.477-10 10-10Zm0 77h105c5.523 0 10 4.477 10 10s-4.477 10-10 10H125c-5.523 0-10-4.477-10-10s4.477-10 10-10Zm0 78h105c5.523 0 10 4.477 10 10s-4.477 10-10 10H125c-5.523 0-10-4.477-10-10s4.477-10 10-10Z'
        let close_svg_path = 'M26 41h204c5.523 0 10 4.477 10 10s-4.477 10-10 10H26c-5.523 0-10-4.477-10-10s4.477-10 10-10Zm0 155h204c5.523 0 10 4.477 10 10s-4.477 10-10 10H26c-5.523 0-10-4.477-10-10s4.477-10 10-10Zm93-78h111c5.523 0 10 4.477 10 10s-4.477 10-10 10H119c-5.523 0-10-4.477-10-10s4.477-10 10-10ZM16.4 103.318v49.764a8.333 8.333 0 0 0 14.226 5.892l24.881-24.881a8.333 8.333 0 0 0 0-11.786L30.626 97.426a8.333 8.333 0 0 0-14.226 5.892Z'
        let down = 'data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6L6,10L7.41,8.59z\'/%3E%3C/svg%3E'
        let up = 'data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M7.41,15.41L12,10.83l4.59,4.58L18,14l-6-6L6,14L7.41,15.41z\'/%3E%3C/svg%3E'
        let doc_switch = true

        function treeAction() {
            let path = document.getElementById("doc-button-path")
            if (doc_switch) {
                path.setAttribute('d', open_svg_path);
                treeClose("book-id")
            } else {
                path.setAttribute('d', close_svg_path);
                treeOpen("book-id")
            }
            doc_switch = !doc_switch
        }

        function treeAction1() {
            let path = document.getElementById("doc-button-path-1")
            if (doc_switch) {
                path.setAttribute('d', open_svg_path);
                treeClose("doc-id")
            } else {
                path.setAttribute('d', close_svg_path);
                treeOpen("doc-id")
            }
            doc_switch = !doc_switch
        }

        function treeClose(treeId) {
            for (let child of document.getElementById(treeId).getElementsByTagName("ul")) {
                if (child.tagName === "UL" && child.className !== 'sectlevel1') {
                    const imgEl = child.parentNode.firstChild;
                    imgEl.src = up
                    child.style.display = "none";
                }
            }
        }

        function treeOpen(treeId) {
            for (let child of document.getElementById(treeId).getElementsByTagName("ul")) {
                if (child.tagName === "UL" && child.className !== 'sectlevel1') {
                    const imgEl = child.parentNode.firstChild;
                    imgEl.src = down
                    child.style.display = "block";
                }
            }
        }

        function test(pa) {
            console.log(pa)
        }

        // 获取 div 元素
        const resizableDiv = document.getElementById('doc-menu');

        // 保存原始鼠标按下位置和当前 div 宽度
        let initialMouseX = 0;
        let initialWidth = 0;

        // 鼠标按下时开始监听 mousemove 和 mouseup 事件
        resizableDiv.addEventListener('mousedown', function (e) {
            if (e.button === 0 && e.clientX >= resizableDiv.offsetWidth - 5) {
                // 左键且在右边缘附近
                initialMouseX = e.clientX;
                initialWidth = resizableDiv.offsetWidth;
                document.addEventListener('mousemove', resizeDiv);
                document.addEventListener('mouseup', stopResizing);
            }
        });

        // 鼠标移动时调整 div 宽度
        function resizeDiv(e) {
            const newWidth = initialWidth + (e.clientX - initialMouseX);
            if (newWidth > 50) { // 设置最小宽度限制（可自定义）
                resizableDiv.style.width = `${newWidth}px`;
            }
        }

        // 鼠标释放时停止监听 mousemove 和 mouseup 事件
        function stopResizing() {
            document.removeEventListener('mousemove', resizeDiv);
            document.removeEventListener('mouseup', stopResizing);
        }

        function showCopyButton(copyBtnId) {
            document.getElementById(copyBtnId).style.display = 'block';
        }

        function hideCopyButton(copyBtnId) {
            setTimeout(function () {
                document.getElementById(copyBtnId).style.display = 'none';
            }, 500);
        }

        function copyData(button) {
            const codeId = button.parentNode.parentNode.dataset.codeId;
            const codeElement = document.querySelector(`[data-code-id="${codeId}"] .code-div code`);
            const content = codeElement.innerText
            navigator.clipboard.writeText(content);
            createMessage({message: '复制 ' + content + '内容成功', duration: 1000})
        }

        function createMessage(options = {}) {
            const container = document.getElementById('message-container');

            const messageEl = document.createElement('div');
            messageEl.classList.add('message');
            messageEl.classList.add(options.type || 'info');
            messageEl.classList.add('center');

            const closeButton = document.createElement('i');
            closeButton.classList.add('message', 'close-btn');
            closeButton.innerHTML = '&times;';
            closeButton.addEventListener('click', () => messageEl.remove());

            messageEl.appendChild(closeButton);

            const contentEl = document.createElement('p');
            contentEl.innerHTML = options.message;
            messageEl.appendChild(contentEl);

            container.appendChild(messageEl);

            setTimeout(() => {
                messageEl.classList.add('show');
            });

            if (options.duration > 0) {
                setTimeout(() => {
                    messageEl.classList.remove('show');
                    setTimeout(() => messageEl.remove(), 300);
                }, options.duration);
            }
        }

        let docs = {
            'doc1': {
                'doc-info': "",
                'api-menu': ""
            },
            'doc2': {
                'doc-info': "",
                'api-menu': ""
            }
        }
        let thisDoc = 'doc1'

        function changeDoc(key) {

        }

        function ulli(el) {
            console.log(el)
            el.classList.toggle('clicked');
        }
    </script>
</head>
<body>

<div id="message-container"></div>

<div class="api-home">
    <!--   主目录   -->
    <div class="doc-menu">
        <div id="book-id">
            <button class="common-txt" onclick="treeAction()" title="目录收起、展开"
                    style="margin-left: 20px; margin-top: 10px">
                <svg width="20px" height="20px" viewBox="0 0 256 256"
                     xmlns="http://www.w3.org/2000/svg"
                     class="larkui-icon larkui-icon-catalog-expand CatalogTreeCollapseTrigger-module_icon_k49Ct">
                    <path d="M74.382 40.5H24.618a8.333 8.333 0 0 0-5.892 14.226l24.881 24.881a8.333 8.333 0 0 0 11.786 0l24.881-24.881A8.333 8.333 0 0 0 74.382 40.5Zm0 134H24.618a8.333 8.333 0 0 0-5.892 14.226l24.881 24.881a8.333 8.333 0 0 0 11.786 0l24.881-24.881a8.333 8.333 0 0 0-5.892-14.226ZM125 41h105c5.523 0 10 4.477 10 10s-4.477 10-10 10H125c-5.523 0-10-4.477-10-10s4.477-10 10-10Zm0 77h105c5.523 0 10 4.477 10 10s-4.477 10-10 10H125c-5.523 0-10-4.477-10-10s4.477-10 10-10Zm0 78h105c5.523 0 10 4.477 10 10s-4.477 10-10 10H125c-5.523 0-10-4.477-10-10s4.477-10 10-10Z"
                          fill="currentColor" fill-rule="evenodd" id="doc-button-path"/>
                </svg>
            </button>
            <label for="example-select" style="margin-left: 20px; margin-top: -6px">选择环境:</label>
            <select id="example-select" name="example-select" onchange="test(this.value)">
                <option value="option1">Option 1</option>
                <option value="option2">Option 2</option>
                <option value="option3">Option 3</option>
                <!-- 更多选项... -->
            </select>
            <ul class="sectlevel1">
                <li>1. 页面目录
                    <ul class="sectlevel2">
                        <li>1.1.用户获取请求
                            <ul class="sectlevel3">
                                <li onclick="changeDoc('doc1')">1.1.1. 请求curl文档1</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li onclick="changeDoc('doc2')">2. 这是标题文档2</li>
                <li>3. 通用返回对象</li>
                <li>4. 用户测试
                    <ul class="sectlevel2">
                        <li>4.1. 用户获取请求
                            <ul class="sectlevel3">
                                <li>4.1.1. 请求curl</li>
                                <li>4.1.2. 请求curl</li>
                            </ul>
                        </li>
                        <li>4.2. 用户获取请求
                            <ul class="sectlevel3">
                                <li>4.2.1. 请求curl</li>
                                <li>4.2.2. 请求curl</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

    <!-- 内容 -->
    <div class="doc-txt">
        <div class="api-info" id="api-doc-info">

            <div>
                <table class="lake-table"
                       style="width: 750px">
                    <colgroup>
                        <col style="width: 180px">
                        <col style="width: 85px">
                        <col style="width: 85px">
                        <col style="width: 400px">
                    </colgroup>
                    <tbody>
                    <tr>
                        <td class="tb-title"><p><span>字段名称1</span></p></td>
                        <td class="tb-title"><p><span>字段类型</span></p></td>
                        <td class="tb-title"><p><span>是否必须</span></p></td>
                        <td class="tb-title"><p><span>字段说明</span></p></td>
                    </tr>
                    <tr>
                        <td><p><strong><span>test</span></strong></p></td>
                        <td><p><strong><span>STRING</span></strong></p></td>
                        <td><p><strong><span>test</span></strong></p></td>
                        <td><p><span>测试修改字段说明。</span></p></td>
                    </tr>
                    <tr>
                        <td><p><strong><span>tw1</span></strong></p></td>
                        <td><p><strong><span>STRING</span></strong></p></td>
                        <td><p><strong><span>tw1</span></strong></p></td>
                        <td><p><span>tw1</span></p></td>
                    </tr>
                    <tr>
                        <td><p><span>tw2</span></p></td>
                        <td><p><span>STRING</span></p></td>
                        <td><p><span>tw2</span></p></td>
                        <td><p><span>tw2</span></p></td>
                    </tr>
                    <tr>
                        <td><p><span>fieldMust</span></p></td>
                        <td><p><span>STRING</span></p></td>
                        <td><p><span>fieldMust</span></p></td>
                        <td><p><span>字段是否必须</span></p></td>
                    </tr>
                    </tbody>
                </table>

                <h1 id="1_1_1">标题</h1>
                <div class="div-container" data-code-id="code1">
                    <div class="copy-div" id="copyBtn1" style="display: none;">
                        <button class="btn btn-sm btn-success" type="button" onclick="copyData(this)">复 制</button>
                    </div>
                    <div class="code-div" onmouseenter="showCopyButton('copyBtn1')"
                         onmouseleave="hideCopyButton('copyBtn1')">
                        <pre><code class="language-json">{{ showStr 测试123}}
                        撒旦发生发射点手动阀手动阀
                        十分骄傲是独立访客sdfasdf
                        十点十分</code></pre>
                    </div>
                </div>

                <div style="height: 50vh">
                    sdsf
                </div>
                <div style="height: 50vh">
                    sdsf
                </div>
                <div style="height: 50vh">
                    sdsf
                </div>

            </div>

        </div>
    </div>

    <!-- 副目录 -->
    <div class="api-menu">
        <h4 class="api-menu-title" id="api-name">documentsInfo.currentApiInfo.apiInfo.apiName</h4>
        <div id="doc-id">
            <button class="common-txt" onclick="treeAction1()" title="目录收起、展开" style="margin-left: 60px">
                <svg width="28px" height="28px" viewBox="0 0 256 256"
                     xmlns="http://www.w3.org/2000/svg"
                     class="larkui-icon larkui-icon-catalog-expand CatalogTreeCollapseTrigger-module_icon_k49Ct">
                    <path d="M74.382 40.5H24.618a8.333 8.333 0 0 0-5.892 14.226l24.881 24.881a8.333 8.333 0 0 0 11.786 0l24.881-24.881A8.333 8.333 0 0 0 74.382 40.5Zm0 134H24.618a8.333 8.333 0 0 0-5.892 14.226l24.881 24.881a8.333 8.333 0 0 0 11.786 0l24.881-24.881a8.333 8.333 0 0 0-5.892-14.226ZM125 41h105c5.523 0 10 4.477 10 10s-4.477 10-10 10H125c-5.523 0-10-4.477-10-10s4.477-10 10-10Zm0 77h105c5.523 0 10 4.477 10 10s-4.477 10-10 10H125c-5.523 0-10-4.477-10-10s4.477-10 10-10Zm0 78h105c5.523 0 10 4.477 10 10s-4.477 10-10 10H125c-5.523 0-10-4.477-10-10s4.477-10 10-10Z"
                          fill="currentColor" fill-rule="evenodd" id="doc-button-path-1"/>
                </svg>
            </button>

            <ul class="sectlevel1">
                <li>1. 页面目录
                    <ul class="sectlevel2" onclick="ulli(this)">
                        <li><span onclick="ulli(this)">1.1.用户获取请求</span>
                            <ul class="sectlevel3" onclick="ulli(this)">
                                <li onclick="ulli(this)"><a href="#1_1_1">1.1.1. 请求curl</a></li>
                                <li><span onclick="ulli(this)">1.1.2. 请求curl</span></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>2. 这是标题</li>
                <li>3. 通用返回对象</li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>